<template>
	<scroll-view class="backview" bounces="false">
		<lexiconNavVue title="蜂计划详情" />
		<!-- 		<view class="top-menu">
		</view> -->
		<scroll-view class="words-scroll" :style="{ height: scrollHeight + 'px'}" scroll-y
			:scroll-with-animation='true'>
			<view class="beeplan-signin-top" v-if="beePlanInfo.name">
				<image class="signin-leftImageView" :src="beePlanInfo.imgUrl" mode="aspectFill"></image>
				<view class="signin-rightContentView">
					<view class="sign-title-replaceView">
						<view class="signin-rightTitle">{{beePlanInfo.name}}</view>
						<!-- <view class="signin-rightreplace" @click="removePlan">删除</view> -->
					</view>
					<view class="signin-right-cikuName">{{beePlanInfo.wordThesaurus.name}}</view>
					<view class="signin-right-already">
						<view class="signin-right-cikuNumber">已掌握：</view>
						<view class="signin-right-cikuNumber">
							{{beePlanInfo.clockWordCount}}/{{beePlanInfo.allWordCount}}
						</view>
					</view>
					<view class="progress-box">
						<progress :percent="progressPercent" show-info stroke-width="6" activeColor="#f3eb1d" active
							font-size="12" />
					</view>
				</view>
			</view>
			<view class="beeplan-signin-bomback">
				<view class="sigin-calendar-backView">
					<view class="gameType-topTitle-view">
						<view class="gameType-topTitle" style="color: white;">
							日期选择 | Date Selection
						</view>
						<view class="gameType-line"></view>
					</view>
					<view :class="`${dateShow ? 'active' : ''} calendar-wrapper`">
						<view class="calendar-panel">
							<view class="date-befor" data-id="0" data-type="month" @click='dataBefor'>
								<view class="date-lastmouth"></view>
							</view>
							<view class="calendar-panel-box">
								<view>{{canlender.year}}年</view>
								<view>{{canlender.month}}月</view>
							</view>
							<view class="date-after" data-id="1" data-type="month" @click='dataBefor'>
								<view class="date-nextmouth"></view>
							</view>
						</view>
						<view class="line-view"></view>
						<view class="calendar-header">
							<view>日</view>
							<view>一</view>
							<view>二</view>
							<view>三</view>
							<view>四</view>
							<view>五</view>
							<view>六</view>
						</view>
						<view class="calendar-body">
							<view class="calendar-childbody">
								<block v-for="(weeks, weekIndex) in canlender.weeks" :key="weekIndex">
									<view class="calender-body-date-week">
										<block v-for="(day, dayIndex) in weeks" :key="dayIndex">
											<view v-if="day.isNowMouth != 'yes'" class="dateClass placeholder">
												{{day.date}}
											</view>
											<view
												v-else-if="nowSelectDayData.date == day.date && nowSelectDayData.month == day.month && nowSelectDayData.year == day.year"
												class="dateClass select" @click="selectDayClicked">{{day.date}}</view>
											<view
												v-else-if="canlender.date == day.date && nowMonth == day.month && nowYear == day.year && (day.state != 1 && day.state != 3)"
												class="dateClass blue" @click="selectDayClicked" :data-index="dayIndex"
												:data-week="weekIndex">{{day.date}}</view>
											<view v-else-if="day.state == 0" class="dateClass notstarted"
												@click="selectDayClicked" :data-index="dayIndex" :data-week="weekIndex">
												{{day.date}}
											</view>
											<view v-else-if="day.state == 1 || day.state == 3" class="dateClass finish"
												@click="selectDayClicked" :data-index="dayIndex" :data-week="weekIndex">
												{{day.date}}
											</view>
											<view v-else-if="day.state == 2" class="dateClass active"
												@click="selectDayClicked" :data-index="dayIndex" :data-week="weekIndex">
												{{day.date}}
											</view>
											<view v-else class="dateClass" @click="selectDayClicked"
												:data-index="dayIndex" :data-week="weekIndex">{{day.date}}</view>
										</block>
									</view>
								</block>
							</view>
						</view>
					</view>
					<button class="bottom-begin-button planFinish" v-if="nowSelectDayData.state == 1"
						@click="reviewWordTap">当日已打卡，单词回顾</button>
					<button class="bottom-begin-button planFinish" v-if="nowSelectDayData.state == 3"
						@click="reviewWordTap">当日已补卡，单词回顾</button>
					<button class="bottom-begin-button planUnFinish" v-else-if="nowSelectDayData.state == 2"
						@click="supplementCardTap">使用补卡券（x{{beePlanInfo.cardNumber}}）</button>
					<button class="bottom-begin-button study"
						v-else-if="nowSelectDayData.state == 0 && canlender.date == nowSelectDayData.date && nowMonth == nowSelectDayData.month && nowYear == nowSelectDayData.year"
						@click="beginToLearnWord">加油！开始学习吧</button>
					<button class="bottom-begin-unstudy" v-else-if="nowSelectDayData.state == 0">要循序渐进哦！</button>
				</view>
			</view>
		</scroll-view>
		<popPromptBox v-if="showPopbox" :msg="message" @confirm="hidePromptbox"></popPromptBox>
		<!-- 删除蜂计划弹窗 -->
		<selectContentView v-if="showBeePlanPromptbox" :msg="ReportPromptMsg" :confirmTitle="leftTitle"
			:cancelTitle="rightTitle" @confirm="deletePlanRe" @cancel="hidePromptbox"></selectContentView>
		<!-- 是否补卡弹窗 -->
		<selectContentView v-if="showCardPromptbox" :msg="ReportPromptMsg" :confirmTitle="leftTitle"
			:cancelTitle="rightTitle" @confirm="supplementCard" @cancel="continueToplayGame"></selectContentView>
		<beeplanPopMessage v-if="showReloadPopbox" :showClose="true" @close="hidePromptbox" :msg="message"
			@confirm="reloadData" btnTxt="刷新试试">
		</beeplanPopMessage>
	</scroll-view>
</template>

<script>
	import util from '../../utils/util';
	import beeplanPopMessage from '../../components/planBeeCom/beeplanPopMessage.vue'
	export default {
		components: {
			beeplanPopMessage
		},
		data() {
			return {
				showReloadPopbox: false,
				showBeePlanPromptbox: false,
				nowSelectDayData: {},
				beePlanInfo: {},
				scrollHeight: uni.getSystemInfoSync().windowHeight,
				showPopbox: false,
				message: '',
				showCardPromptbox: false,
				showReportPromptbox: false,
				planDayData: [],
				calShow: true, // 日历组件是否打开
				dateShow: false, // 日期是否选择
				selectDay: '', // 当前选择日期
				canlender: {
					"weeks": []
				},
				selected: [{
					date: '2018-5-21'
				}, {
					date: '2018-5-22'
				}, {
					date: '2018-5-24'
				}, {
					date: '2018-5-25'
				}],
				progressPercent: 0,
			}
		},
		onLoad(options) {
			if (options.planId) {
				var _date = new Date();
				var year = _date.getFullYear(); //年
				var month = _date.getMonth() + 1; //月
				this.nowYear = year;
				this.nowMonth = month;
				this.planId = options.planId;
			}
		},
		onShow() {
			this.getPlanList();
		},
		onReady() {
			// const that = this;
			// uni.createSelectorQuery().select('.top-menu').boundingClientRect(rect => {
			// 	that.scrollHeight = uni.getSystemInfoSync().windowHeight - rect.bottom;
			// }).exec();
		},
		methods: {
			//获取蜂计划详情
			getPlanList: function() {
				var formData = {
					'id': this.planId,
				}
				this.$http.beePlanInfo(formData).then(res => {
					if (res.code == 200) {
						console.log('beePlanInfo______', res);
						this.beePlanInfo = res.data;
						if (res.data.allWordCount != 0) {
							this.progressPercent = (res.data.clockWordCount / res.data.allWordCount * 100)
								.toFixed(2);
						}
						console.log('this.progressPercent', this.progressPercent);
						this.getBeePlanDate(new Date());
						if (this.isOpen) {
							this.calShow = false;
							this.dateShow = true;
						}
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						})
					}
				})
			},
			reloadData: function() {
				this.hidePromptbox();
				this.getPlanList();
			},
			//获取蜂计划日历信息
			getBeePlanDate: function(dateData) {
				if (typeof dateData !== 'object') {
					dateData = dateData.replace(/-/g, "/")
				}
				var _date = new Date(dateData);
				var year = _date.getFullYear(); //年
				var month = _date.getMonth() + 1; //月
				this.nowSelectYear = year;
				this.nowSelectMonth = month;
				var formData = {};
				formData.id = this.beePlanInfo.id;
				formData.year = year;
				formData.month = month < 10 ? "0" + month : month;
				var that = this;
				this.$http.beeplanLogs(formData).then(res => {
					if (res.code == 200) {
						this.planDayData = res.data;
						this.getWeek(dateData);
					} else if (res.code == 5001) {
						this.showReloadPopbox = true;
						this.message = res.msg;
						this.planDayData = [];
						this.getWeek(dateData)
					} else {
						this.planDayData = [];
						this.getWeek(dateData)
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						})
					}
				})
			},
			// 获取日历内容
			getWeek(dateData) {
				var selected = this.selected;
				if (typeof dateData !== 'object') {
					dateData = dateData.replace(/-/g, "/")
				}
				var _date = new Date(dateData);
				var year = _date.getFullYear(); //年
				var month = _date.getMonth() + 1; //月
				var date = _date.getDate(); //日
				var day = _date.getDay(); // 天
				var canlender = [];
				var dates = {
					firstDay: new Date(year, month - 1, 1).getDay(),
					lastMonthDays: [], // 上个月末尾几天
					currentMonthDys: [], // 本月天数
					nextMonthDays: [], // 下个月开始几天
					endDay: new Date(year, month, 0).getDay(),
					weeks: []
				}
				// 循环上个月末尾几天添加到数组
				for (var i = dates.firstDay; i > 0; i--) {
					dates.lastMonthDays.push({
						'date': new Date(year, month, -i).getDate() + '',
						'month': month - 1
					})
				}
				// 循环本月天数添加到数组
				for (var i = 1; i <= new Date(year, month, 0).getDate(); i++) {
					dates.currentMonthDys.push({
						'date': i + "",
						'month': month,
						'isNowMouth': 'yes',
					})
				}
				// 循环下个月开始几天 添加到数组
				for (var i = 1; i < 7 - dates.endDay; i++) {
					dates.nextMonthDays.push({
						'date': i + '',
						'month': month + 1
					})
				}
				canlender = canlender.concat(dates.lastMonthDays, dates.currentMonthDys, dates.nextMonthDays);
				// 拼接数组  上个月开始几天 + 本月天数+ 下个月开始几天
				for (var i = 0; i < canlender.length; i++) {
					if (i % 7 == 0) {
						dates.weeks[parseInt(i / 7)] = new Array(7);
					}
					var dayData = canlender[i];
					for (var index = 0; index < this.planDayData.length; index++) { //将打卡状态更新到当月日历中
						const planday = this.planDayData[index];
						if (planday.day == dayData.date && planday.month == dayData.month) {
							dayData.state = planday.state;
							dayData.id = planday.id;
							dayData.year = year;
							if (planday.day == date && planday.year == this.nowYear && planday.month == this
								.nowMonth) { //获取当天打卡id
								this.nowSelectDayData = dayData; //初始化当天打卡状态
							}
						}
					}
					dates.weeks[parseInt(i / 7)][i % 7] = dayData;
				}
				var dd = new Date();
				// 渲染数据
				this.selectDay = month + "月" + date + "日"
				canlender.weeks = dates.weeks;
				canlender.month = month;
				canlender.date = (month == this.nowMonth ? dd.getDate() : date);
				canlender.day = day;
				canlender.year = year;
				this.canlender = canlender;
				if (this.canlender.year != this.nowYear || this.canlender.month != this.nowMonth) {
					var selectWeek = dates.weeks[0];
					this.nowSelectDayData = selectWeek[0];
				}
				month = month < 10 ? "0" + month : month;
				date = date < 10 ? "0" + date : date;
				this.$emit('getdate', {
					year,
					month,
					date
				})
			},
			// 前一天|| 后一天
			dataBefor(e) {
				let num = 0;
				let types = e.currentTarget.dataset.type;
				if (e.currentTarget.dataset.id === "0") {
					num = -1;
				} else {
					num = 1
				}
				let year = this.canlender.year + "-" + this.canlender.month + "-" + '01'
				let _date = this.getDate(year, num, types === 'month' ? "month" : "day");
				this.getBeePlanDate(_date);
			},
			/**
			 * 时间计算
			 */
			getDate(date, AddDayCount, str) {
				if (typeof date !== 'object') {
					date = date.replace(/-/g, "/")
				}
				let dd = new Date(date)
				var firstmouth = dd.getMonth();
				switch (str) {
					case 'day':
						dd.setDate(dd.getDate() + AddDayCount) // 获取AddDayCount天后的日期
						break;
					case 'month':
						dd.setMonth(dd.getMonth() + AddDayCount) // 获取AddDayCount天后的日期
						break;
					case 'year':
						dd.setFullYear(dd.getFullYear() + AddDayCount) // 获取AddDayCount天后的日期
						break;
				}
				var secondmouth = dd.getMonth();
				let y = dd.getFullYear()
				let m;
				if (secondmouth - firstmouth > 1) {
					m = (dd.getMonth()) < 10 ? '0' + (dd.getMonth()) : (dd.getMonth() + 1) // 获取当前月份的日期，不足10补0
				} else {
					m = (dd.getMonth() + 1) < 10 ? '0' + (dd.getMonth() + 1) : (dd.getMonth() + 1) // 获取当前月份的日期，不足10补0
				}
				let d = dd.getDate() < 10 ? '0' + dd.getDate() : dd.getDate() // 获取当前几号，不足10补0
				return y + '-' + m + '-' + d
			},
			// 日期选择
			selectDayClicked(e) {
				let index = e.currentTarget.dataset.index;
				let week = e.currentTarget.dataset.week;
				if (week != undefined) {
					var selectData = this.canlender.weeks[week][index];
					this.nowSelectDayData = selectData;
				}
			},
			// 回顾打卡单词
			reviewWordTap: function() {
				this.beginToLearn('review', this.nowSelectDayData.id);
			},
			//开始学单词
			beginToLearnWord: function() {
				this.beginToLearn('', this.nowSelectDayData.id);
			},
			//补前一天的卡
			supplementCard: function() {
				this.showCardPromptbox = false;
				this.beginToLearn('fillCard', this.lastBeePlanLogId);
			},
			//不去补卡，继续学习
			continueToplayGame: function() {
				this.showCardPromptbox = false;
				this.beginToLearn('conLearn', this.nowSelectDayData.id);
			},
			//开始学习
			beginToLearn: function(review, dayId) {
				var formData = {
					'id': dayId
				};
				var that = this;
				this.$http.getBeePlanLogInfo(formData).then(res => {
					if (res.code == 200) {
						this.$globalData.wordListJson = JSON.stringify(res.data.words)
						var wordData = JSON.stringify(res.data.words[0]);
						var transmitData = {
							wordData: wordData,
							type: 'normal',
							beePlanLogId: res.data.beePlanId,
							wordReview: review,
							dayId: dayId
						}
						if (review == 'review') { // 单词回顾
							transmitData.title = '打卡单词回顾';
							uni.navigateTo({
								url: '/pages/planBee/wordClockDetailContentView?transmitData=' +
									encodeURIComponent(JSON.stringify(transmitData))
							})
						} else {
							transmitData.title = '打卡单词学习';
							uni.navigateTo({
								url: '/pages/planBee/workClickLearnWordsList?transmitData=' +
									encodeURIComponent(JSON.stringify(transmitData))
							})
						}
					} else if (res.code == 239) {
						this.showPopbox = true
						this.message = res.msg;
					} else if (res.code == 242) {
						this.lastBeePlanLogId = res.data.beePlanId;
						this.ReportPromptMsg = '检测到您昨日未打卡，是否立即去补卡？';
						this.leftTitle = '先去补卡';
						this.rightTitle = '继续学习';
						this.showCardPromptbox = true;
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						})
					}
				})
			},
			hidePromptbox() {
				this.showPopbox = false;
				this.showBeePlanPromptbox = false;
				this.showCardPromptbox = false;
				this.showReloadPopbox = false;
			}, // 补卡点击事件
			supplementCardTap: util.noDoubleClick(function(e) {
				if (this.beePlanInfo.cardNumber && this.beePlanInfo.cardNumber > 0) {
					this.beginToLearn('fillCard', this.nowSelectDayData.id);
				} else {
					this.showPopbox = true;
					this.message = '补卡券数量不足。';
				}
			}),
			// 删除蜂计划
			removePlan() {
				this.leftTitle = '是';
				this.rightTitle = '否';
				this.ReportPromptMsg = '是否确认删除该打卡计划？';
				this.showBeePlanPromptbox = true;
			},
			// 确认删除蜂计划
			deletePlanRe() {
				var formData = {};
				formData.id = this.planId;
				this.$http.deleteBeePlan(formData).then(res => {
					this.showBeePlanPromptbox = false;
					if (res.code == 200) {
						uni.navigateBack()
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						})
					}
				})
			},
		}
	}
</script>

<style lang="less">
	.beeplan-signin-bomback {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.notstarted {
		background-color: rgb(230, 230, 230) !important;
	}

	.blue {
		background-color: #52b8f5 !important;
	}

	.active {
		background-color: red !important;
	}

	.finish {
		background-color: green !important;
	}

	.select {
		background-color: orange !important;
	}

	.placeholder {
		color: #a4a4a4 !important;
	}

	.dateClass {
		width: 30px;
		text-align: center;
		color: #000000;
		background-color: #fff;
		height: 30px;
		line-height: 30px;
		margin-top: 5px;
		font-size: 13px;
		border-radius: 15px;
	}

	.calender-body-date-week {
		display: flex;
		justify-content: space-around;
		width: 100%;
		height: 40px;
		/* border-bottom: 1px #f5f5f5 solid; */
	}

	.calendar-childbody {
		display: flex;
		flex-wrap: wrap;
		width: 100%;
	}

	.calendar-body {
		display: flex;
		justify-content: center;
		border-radius: 15px;
		width: 98%;
		background-color: white;
		padding: 10px 0rpx;
	}

	.calendar-header {
		display: flex;
		width: 90%;
	}

	.calendar-header view {
		width: 100%;
		text-align: center;
		line-height: 40px;
		color: white;
		font-size: 14px;
		font-weight: bold;
	}

	.line-view {
		width: 90%;
		height: 2px;
		background-color: white;
	}

	.date-nextmouth {
		width: 17px;
		height: 17px;
		background-image: url(../../static/image/fjh/workPlanNextmouth-white.png);
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}

	.calendar-panel-box {
		display: flex;
		font-weight: 900;
		height: 40px;
		line-height: 40px;
		color: #f3eb1d;
		font-size: 22px;
		padding: 0px 15px;
	}

	.date-lastmouth {
		width: 17px;
		height: 17px;
		background-image: url(../../static/image/fjh/workPlanLastmouth-white.png);
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}

	.date-befor,
	.date-after {
		/* border: 1px red solid; */
		display: flex;
		justify-content: center;
		align-items: center;
		height: 40px;
		width: 40px;
		text-align: center;
		line-height: 40px;
		/* margin-right: 20rpx; */
	}

	.calendar-wrapper.active {
		transform: translateY(0%);
	}

	.calendar-panel {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 16px;
		height: 40px;
	}

	.sigin-calendar-backView {
		width: 90%;
		margin: 15px 0rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background: var(--beeGradientTopBack);
		padding: 20px 5px;
		border-radius: 25px;
	}

	.top-menu {
		width: 100%;
		height: 1px;
		background: #000000;
	}

	.beeplan-signin-top {
		width: 100%;
		background: black;
		display: flex;
		flex-direction: row;
		align-items: center;
		box-shadow: 5rpx 0rpx 10rpx 5rpx rgb(0, 0, 0);
	}

	.signin-leftImageView {
		width: 130px;
		height: 80px;
		margin: 13px 13px 13px 20px;
		background-color: rgb(230, 230, 230);
	}

	.signin-rightContentView {
		width: 53%;
		height: 80px;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
	}

	.sign-title-replaceView {
		width: 53%;
		height: 20px;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.signin-rightTitle {
		color: white;
		font-size: 14px;
		font-weight: 600;
		display: flex;
		text-align: left;
		display: inline-block;
		white-space: nowrap;
		width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.signin-rightreplace {
		width: 38px;
		height: 18px;
		border-radius: 4px;
		font-size: 12px;
		text-align: center;
		line-height: 18px;
		color: white;
		background-color: #d94c4c;
	}

	.signin-right-cikuName {
		color: rgb(204, 204, 204);
		text-align: left;
		font-size: 11px;
	}

	.signin-right-already {
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		margin-top: 2px;
	}

	.signin-right-cikuNumber {
		color: #f3eb1d;
		font-size: 11px;
	}

	.progress-box {
		width: 100%;
		height: 25px;
		color: white;
		margin-top: 5px;
	}

	.calendar-wrapper {
		width: 90%;
		margin-top: 20px;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		flex-direction: column;
	}

	.study {
		color: white;
		background-color: black;
		/* background: linear-gradient(#fc823d, #fa3748); */
	}

	.planFinish {
		color: white;
		background-color: black;
	}

	.planUnFinish {
		background-color: black;
		color: white;
	}

	.bottom-begin-button {
		width: 260px;
		height: 40px;
		border-radius: 20px;
		font-size: 14px;
		font-family: 'hzgb';
		text-align: center;
		line-height: 40px;
		margin-top: 20px;
		margin-bottom: 10px;
	}

	.bottom-begin-unstudy {
		width: 260px;
		height: 40px;
		border-radius: 18px;
		font-size: 14px;
		text-align: center;
		line-height: 40px;
		font-family: 'hzgb';
		background-color: gray;
		color: white;
		margin-top: 20px;
		margin-bottom: 10px;
	}
</style>